<template>
  <el-dialog class="node-dialog" title="提示" :show-close="false" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
    <div class="IM-status" v-if="IMList.length > 0">
      <h4>IM项目检测中</h4>
      <div class="list">
        <div class="box" v-for="(item,index) in IMList" :key="index">
          <div class="name">
            <span>{{item.name}}</span>
            <i class="el-icon-loading loading-color" v-if="item.status == 0 || item.status == 3"></i>
            <i class="el-icon-success success-color" v-if="item.status == 1"></i>
            <i class="el-icon-error error-color" v-if="item.status == 2"></i>
            <i class="el-icon-warning-outline warning-outline-color" v-if="item.status == 4"></i>
          </div>
          <div class="status">
            <span v-if="item.status == 1" class="success-color">{{item.successMessage}}</span>
            <span v-if="item.status == 2" class="error-color">{{item.errorMessage}}</span>
            <span v-if="item.status == 3" class="loading-color">{{item.repairMessage}}</span>
            <span v-if="item.status == 4" class="warning-outline-color">{{item.overtimeMessage}}</span>
          </div>
          <div class="operation">
            <el-button v-if="item.name != 'IM正在初始化'" @click="repairFn(item)" size="mini" class="el-icon-refresh" type="primary"></el-button>
            <span v-if="item.name == 'IM正在初始化' && (item.status == 4 || item.status == 2)"> 请刷新浏览器 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="TRTC-status" v-if="TRTCList.length > 0">
      <h4>TRTC项目检测中</h4>
      <div class="list">
        <div class="box" v-for="(item,index) in TRTCList" :key="index">
          <div class="name">
            <span>{{item.name}}</span>
            <i class="el-icon-loading loading-color" v-if="item.status == 0 || item.status == 3"></i>
            <i class="el-icon-success success-color" v-if="item.status == 1"></i>
            <i class="el-icon-error error-color" v-if="item.status == 2"></i>
            <i class="el-icon-warning-outline warning-outline-color" v-if="item.status == 4"></i>
          </div>
          <div class="status">
            <span v-if="item.status == 1" class="success-color">{{item.successMessage}}</span>
            <span v-if="item.status == 2" class="error-color">{{item.errorMessage}}</span>
            <span v-if="item.status == 3" class="loading-color">{{item.repairMessage}}</span>
            <span v-if="item.status == 4" class="warning-outline-color">{{item.overtimeMessage}}</span>
          </div>
          <div class="operation">
            <el-button v-if="item.name != 'TRTC正在初始化'" @click="repairFn(item)" size="mini" class="el-icon-refresh" type="primary"></el-button>
            <span v-if="item.name == 'TRTC正在初始化' && (item.status == 4 || item.status == 2)"> 请刷新浏览器 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="ok">
      <el-button type="primary" @click="handleClose">知道了</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      forceClose: false // 强制关闭
    }
  },
  computed: {
    // 获取IM和TRTC的状态
    ...mapGetters(["IMStatus", "TRTCStatus"]),
    IMList() {
      let arr = [];
      for (let i in this.IMStatus) {
        //   如果需要显示检测
        if (this.IMStatus[i].isShow) {
          arr.push(this.IMStatus[i]);
        }
      }
      return arr;
    },
    TRTCList() {
      let arr = [];
      for (let i in this.TRTCStatus) {
        //   如果需要显示检测
        if (this.TRTCStatus[i].isShow) {
          arr.push(this.TRTCStatus[i]);
        }
      }
      return arr;
    },
    dialogVisible() {
      return (this.IMList.length > 0 || this.TRTCList.length > 0) && !this.forceClose;
    },
  },
  methods: {
    handleClose() {
      let success = true;
      for (let i in this.IMStatus) {
        if (this.IMStatus[i].isShow) {
          if (this.IMStatus[i].status != 1) {
            success = false;
          }
        }
      }
      for (let i in this.TRTCStatus) {
        if (this.TRTCStatus[i].isShow) {
          if (this.TRTCStatus[i].status != 1) {
            success = false;
          }
        }
      }
      if (success) {
        this.$store.dispatch("setIMStatus");
        this.$store.dispatch("setTRTCStatus");
      } else {

        this.$confirm("当前环境异常，强行进入可能会导致会议异常，建议点击重试按钮，或者刷新页面", "请注意", {
          confirmButtonText: "强行进入",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          this.forceClose = true;
        })
      }
    },
    repairFn(item) {
      if (item.name == 'IM正在初始化') {
      }
      if (item.name == 'IMSDK检测中') {
        this.$store.dispatch("setIMFn", { name: "againReady" });
      }
      if (item.name == 'IM登录中') {
        this.$store.dispatch("setIMFn", { name: "IMLogin" });
      }
      if (item.name == 'IM加群中') {
        this.$store.dispatch("setIMFn", { name: "joinGroup" });
      }
      if (item.name == 'TRTC加入会议中') {
        this.$store.dispatch("setTRTCFn", { name: "againJoinRoom" });
      }
      if (item.name == '创建本地视频' || item.name == '发布本地视频') {
        this.$store.dispatch("setTRTCFn", { name: "againCreateStream" });
      }
    },
  }
};
</script>

<style scoped lang="scss">
.node-dialog {
  .loading-color {
    color: #606266;
  }
  .success-color {
    color: #67c23a;
  }
  .error-color {
    color: #f56c6c;
  }
  .warning-outline-color {
    color: #e6a23c;
  }
  .TRTC-status {
    margin-top: 20px;
  }
  .IM-status,
  .TRTC-status {
    h4 {
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
    }
    .list {
      .box {
        justify-content: space-between;
        margin-top: 10px;
        display: flex;
        align-items: center;
        .name {
          width: 140px;
        }
        .status {
          width: 120px;
          text-align: left;
        }
        .operation {
          text-align: right;
          width: 90px;
          button {
            width: 50px;
          }
        }
      }
    }
  }
  .ok {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
